<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Amazium - The responsive web framework..!</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
	
	<script type="application/x-javascript">
		addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){
			window.scrollTo(0,1);
		}
	</script>
	
	<!-- CSS -->
	<link rel="stylesheet" href="includes/base.css">
	<link rel="stylesheet" href="includes/amazium.css">
	<link rel="stylesheet" href="includes/layout.css">
	
	<!-- Favicons -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
	
	<!-- To Top scripts -->
	<script src="includes/smoothscroll.js"type="text/javascript" ></script>
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="includes/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="includes/jquery.ui.totop.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	
	<!-- Analytics -->

</head>
<body>

<div class="row">
	<div class="column grid_12">
		<hr />
		<div class="row row-example-top">
			<div class="column grid_3">
				<h1>Heading &lt;/h1&gt;</h1>
				<h2>Heading &lt;/h2&gt;</h2>
				<h3>Heading &lt;/h3&gt;</h3>
				<h4>Heading &lt;/h4&gt;</h4>
				<h5>Heading &lt;/h5&gt;</h5>
				<h6>Heading &lt;/h6&gt;</h6>
				<p><a href="#" class="btn">Button</a></p>
			</div>
			<div class="column grid_3">
				<h3>Round Bullets</h3>
				<ul class="circle">
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				</ul>
				<p>Code example:</p>
				<blockquote>
					&lt;ul class="circle"&gt;<br />
					<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
					&lt;/ul&gt;
				</blockquote>			
			</div>
			<div class="column grid_3">
				<h3>Square Bullets</h3>
				<ul class="square">
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				</ul>
				<p>Code example:</p>
				<blockquote>
					&lt;ul class="square"&gt;<br />
					<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
					&lt;/ul&gt;
				</blockquote>
			</div>
			<div class="column grid_3">
				<h3>Fancy Bullets</h3>
				<ul class="fancy">
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				</ul>
				<p>Code example:</p>
				<blockquote>
					&lt;ul class="fancy"&gt;<br />
					<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
					&lt;/ul&gt;
				</blockquote>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="column grid_12">
		<hr />
		<h1>Forms & Tables</h1>
		<div class="row">
			<div class="column grid_6">
				<h3>Form</h3>
				<div id="stylized-form">
					<form id="form" name="form" method="post" action="index.html">		
						<div class="wrapper-block">
							<label>Last Name:<span class="small-label">Add your last name</span></label>
							<input type="text" name="name" id="name" />
						</div>
						<div class="wrapper-block">
							<label for="user">This is a Dropdown:<span class="small-label">Please select one option</span></label>
							<select id="dropdown">
								<option>Select something...</option>
								<option>Dropdown 01</option>
								<option>Dropdown 02</option>
							</select>
						</div>
						<div class="wrapper-block">
							<label for="comments">Radio Buttons</label>
							<input type="radio" name="radio1" />Yes
							<input type="radio" name="radio2" />No
						</div>
						<div class="wrapper-block">
							<label for="comments">Check Boxes</label>
							<input type="checkbox" name="checkbox1" />One
							<input type="checkbox" name="checkbox2" />Two
						</div>
						<div class="wrapper-block">
							<label for="comments">Feedback:<span class="small-label">You can write your comments here</span></label>
							<textarea id="comments" rows="3" cols="10"></textarea>
						</div>
						<input type="submit" value="Submit" class="submit btn-form" />
					</form>
				</div>
			</div>
			<div class="column grid_6">
				<h3>Table</h3>
				<table>
					<tr>
						<th class="first last" colspan="4">Title</th>
					</tr>
					<tr>
						<th class="first">Item:</th>
						<th>Category:</th>
						<th>Description:</th>
						<th class="last">Size:</th>
					</tr>
					<tr class="even">
						<td class="first">Bananas</td>
						<td>Fruit</td>
						<td>Desc</td>
						<td class="last">3KG</td>
					</tr>
					<tr class="odd">
						<td class="first">Bananas</td>
						<td>Fruit</td>
						<td>Desc</td>
						<td class="last">3KG</td>
					</tr>
					<tr class="even">
						<td class="first">Bananas</td>
						<td>Fruit</td>
						<td>Desc</td>
						<td class="last">3KG</td>
					</tr>
					<tr class="odd">
						<td class="first">Bananas</td>
						<td>Fruit</td>
						<td class="highlight">Desc</td>
						<td class="last">3KG</td>
					</tr>
				</table>
			</div>
		</div>
		<hr />
	</div>
</div>

<div class="row">
	<div class="column grid_12">
		<h1>Images</h1>
		<div class="row">	
			<div class="column grid_6">		
				<p><img src="images/blank.jpg" border="0"  alt="blank image" class="max-image"></p>
			</div>
			<div class="column grid_4">	
				<p><img src="images/blank.jpg" border="0"  alt="blank image" class="max-image"></p>
			</div>
			<div class="column grid_2">	
				<p><img src="images/blank.jpg" border="0"  alt="blank image" class="max-image"></p>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="column grid_12">
		<hr />
		<h1>Videos</h1>
		<div class="row">
			<div class="column grid_6">
				<h3>Vimeo</h3>
				<div class="video-container">
					<iframe src="http://player.vimeo.com/video/21465475?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=0" frameborder="0"></iframe>
				</div>
			</div>
			<div class="column grid_6">
				<h3>YouTube</h3>
				<div class="video-container">
					<iframe src="http://www.youtube.com/embed/d3J12dNz4xo" frameborder="0" allowfullscreen></iframe>
				</div>
			</div>
		</div>
		<hr />
	</div>
</div>

</body>
</html>